<template>
    <div>
        <div class="topBtn">
            <div class="sizeBig"><span>公告管理</span></div>
            <div>
                <el-button type="primary" @click="addNotice"><i class="iconfont icon-addNew"></i> 新增</el-button>
                <el-button type="primary" icon="el-icon-edit" @click="checkChange">修改</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="remove">删除</el-button>
            </div>
        </div>
        <div class="message">
            <p class="character">1.设置系统版本更新公告通知，对历史版本进行查看。 <span class="skip">查看帮助文档</span></p>
        </div>
        <div class="inputcontent">
            <el-input v-model="search" placeholder="请输入内容" class="inSearch"></el-input>
            <div class="iconSearch"></div>
        </div>
        <div class="tablesize">
            <Table :reset="reset" v-on:getId="getListId" v-on:datalist="listReq"></Table>
        </div>
         <div class="block"> 
            <el-pagination
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
             @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="600px"
            >
            <div>
                <el-input v-model="title" placeholder="请输入公告标题" style="margin-bottom:20px;width:100%;" ref="customerInput"></el-input>
                    <!-- <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 6}"
                    placeholder="请输入公告内容"
                    v-model="textarea2">
                </el-input> -->
                <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="content">
                </el-input> 
            </div>
            <div class="versions">
                <div class="versionsleft">本次更新：</div>
                <div class="versionsright">
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">
                            <el-tooltip content="有重大的更新内容或更改较多的东西" placement="bottom">
                                <span>大版本更新</span>
                            </el-tooltip>
                        </el-radio>
                        <el-radio :label="2">
                            <el-tooltip content="当天修改的一些小问题或小BUG" placement="bottom">
                                <span>日常优化发布</span>
                            </el-tooltip>
                        </el-radio>
                        <el-radio :label="3">
                            <el-tooltip content="临时突然修改的内容" placement="bottom">
                                <span>临时修订</span>
                            </el-tooltip>
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="versions">
                <div class="versionsleft">本次版本：</div>
                <div class="versionsright">
                    <el-radio-group v-model="radios">
                        <el-radio :label="1">
                            <el-tooltip content="基础页面结构" placement="bottom">
                                <span>Base版本</span>
                            </el-tooltip>
                        </el-radio>
                        <el-radio :label="2">
                            <el-tooltip content="网站页面的初测版" placement="bottom">
                                <span>Alpha版本</span>
                            </el-tooltip>
                        </el-radio>
                        <el-radio :label="3">
                            <el-tooltip content="网站页面成型版" placement="bottom">
                                <span>Beta版本</span>
                            </el-tooltip>
                        </el-radio>
                        <el-radio :label="4">
                            <el-tooltip content="网站页面最终成型版" placement="bottom">
                                <span>Release版本</span>
                            </el-tooltip>
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="submitbut">
                <el-button type="primary" plain @click="dialogVisible=false" style="margin-right:30px">取消</el-button>
                <el-button type="primary" plain @click="submit">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Table from './components/noticeTable'
import operation from '@/mixins/operation'
import {delay} from '@/utils/autoSearch'
import { async } from 'q';
export default {
    name:'userControl',
    mixins:[operation],
    components:{
        Table
    },
    data(){
        return{
            module:'notice',    //online数据请求
            search:'',   //搜索条件
            UserID:[],  //id值
            dialogVisible:false,   // 增加公告的弹出框
            title:'',  //标题
            content:'',  //更新内容
            radio:-1,  //本次更新
            radios:-1,  //版本更新
            checkList:[],  //勾选的数据
            number:-1, //执行0是增加 1是修改
        }
    },
    watch: {
        //用来监听页面变量的改变
        //监听搜索，300ms执行一次fetchData方法（去搜索）
        search() {
            delay(() => {
                this.fetchData();
            }, 300);
        }
    },
    methods:{
        // 自动搜索的方法
        async fetchData(val){
            this.initialize({keyName:this.search,isDelete:0,page:1,pageSize:10})
        },
        addNotice(){
            this.dialogVisible=true
            this.title='',
            this.content='',
            this.radio='',
            this.radios=''
            this.number=0
        },
        remove(){  
            if(this.UserID.length==0){
                this.$message({
                message: '请勾选需要删除的公告',
                type: 'warning'
                });
            }else{
               this.$confirm('此操作将永久删除该通知, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                   let listid=''
                this.UserID.forEach(el => {
                    listid+=el+','
                });
                listid=listid.substr(0,listid.length-1)
                this.removed({id:listid}).then(()=>{
                    this.initialize({keyName:this.search,isDelete:0,page:1,pageSize:10})
                })
            }).catch(() => {

            });
            } 
        },
        listReq(data){
            this.checkList=data
        },
        handleCurrentChange(val){
            this.page=val
            this.initialize({keyName:this.search,isDelete:0,page:val,pageSize:10})
        },
        getListId(data){
            this.UserID=data
        },
        checkChange(){
            this.number=1
            if(this.UserID.length!==1){
                this.$message({
                message: '请勾选一条公告',
                type: 'warning'
                });
            }else{
                this.dialogVisible=true
                this.title=this.checkList[0].Title
                this.content=this.checkList[0].Content
                this.radio=this.checkList[0].UpdateType
                this.radios=this.checkList[0].VersionType
            }
        },
        submit(){
            if(this.number==0){
                if(this.title==""){
                this.$message({
                message: '公告标题不能为空',
                type: 'warning'
                });
                }else if(this.content==""){
                    this.$message({
                message: '公告标题不能为空',
                type: 'warning'
                });
                }else if(this.radio==""){
                    this.$message({
                message: '本次更新版本不能为空',
                type: 'warning'
                });
                }else if(this.radios==""){
                     this.$message({
                message: '本次版本更新不能为空',
                type: 'warning'
                });
                }else{
                    this.increase({title:this.title,content:this.content,updateType:this.radio,versionType:this.radios}).then(()=>{
                        this.initialize({keyName:this.search,isDelete:0,page:1,pageSize:10})
                        this.dialogVisible=false
                    })
                }
            }else{
                if(this.title==""){
                    this.$message({
                message: '公告标题不能为空',
                type: 'warning'
                });
                }else if(this.content==""){
                    this.$message({
                message: '公告内容不能为空',
                type: 'warning'
                });
                }else if(this.radio==""){
                    this.$message({
                message: '本次更新版本不能为空',
                type: 'warning'
                });
                }else if(this.radios==""){
                    this.$message({
                message: '本次版本更新不能为空',
                type: 'warning'
                });
                }else{
                    let signboard=this.checkList[0].ID
                    this.change({id:signboard,title:this.title,content:this.content,updateType:this.radio,versionType:this.radios}).then(()=>{
                        this.initialize({keyName:this.search,isDelete:0,page:1,pageSize:10})
                        this.dialogVisible=false
                    })
                }
            }
        }
    },
    created(){
        this.initialize({keyName:this.search,isDelete:0,page:1,pageSize:10})
    }
}
</script>

<style lang="scss" scoped>
.sizeBig{
    font-size: 16px;
}
.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
}
.message{
    width:98%;
    margin: 0 auto;
    height:60px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{
            color: #0095FF;
            margin-left:10px;
            cursor:pointer; 
        }
    }
}
.inputcontent{
    width:98%;
    margin: 0 auto;
    height: 80px;
    position: relative;
    padding-top:21px;
    box-sizing: border-box; 
    .iconSearch{
        position: absolute;
        left: 277px;
        top:30px;
        width:20px;
        height: 20px;
        background-image: url('./image/搜索.png') ;
        background-repeat: no-repeat;
        cursor:pointer; 
    }
    .inSearch{
        width:308px;
        height:40px;
    }
}
.tablesize{
    width:98%;
    margin: 0 auto;
}
.block{
    text-align: right;
    margin:28px 20px 0 0; 
}
.versions{
    display: flex;
    font-size: 15px;
    padding-top:20px; 
}
.versionsleft{
    flex: 1;
    text-align: right;
}
.versionsright{
    flex: 5;
}
.submitbut{
    margin: 30px 0 20px;
    text-align: center;
}
</style>
